vue多页面引入同一组件,传入不同值

2024-07-01 15:57| 来源: 网络整理| 查看: 265

这里直接开始，我是新创建了一个vue小demo项目，利用Helloworld组件实现

创建好之后，对About页面也引入Helloworld组件，并注册使用

在这里插入图片描述

接下来我们修改 msg的值，改成绑定形式在这里插入图片描述 home页面的msg的内容是：msg: “Welcome to Your Home.Vue”。对不同页面的msg的值，并做出不同的修改，是用于区分的

在Helloworld组件，改变传值的写法。 default是默认内容，用于在其他页面引入时，不传值的时候，显示的内容。在这里插入图片描述

运行效果：在这里插入图片描述上下为 home 页面和 about 页面

接下来添加一个数据：

数组data

在这里插入图片描述

运行效果如下：在这里插入图片描述

当我们再写一个My.vue页面，引入helloworld组件，不传值时：

在这里插入图片描述下面图片就是Helloworld组件，默认显示的内容。（如上图的引入不传值）

在这里插入图片描述

效果：

在这里插入图片描述

【本文地址】

公司简介

联系我们